<template>
	<div class="ele-body">
		<el-card shadow="never">
			<!-- 搜索表单 -->
			<el-form :model="table.where" label-width="77px" class="ele-form-search" @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
				<el-row :gutter="15">
					<el-col :md="6" :sm="12">
						<el-form-item label="任务名称:"><el-input v-model="table.where.jobname" placeholder="请输入" clearable /></el-form-item>
					</el-col>
					<el-col :md="6" :sm="12">
						<el-form-item label="执行时间:">
							<el-date-picker
								v-model="daterange"
								type="datetimerange"
								unlink-panels
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd HH:mm:ss"
								class="ele-fluid"
								@change="onDateRangeChoose"
							/>
						</el-form-item>
					</el-col>
					<el-col :md="6" :sm="12">
						<el-form-item label="执行状态:">
							<el-select v-model="table.where.state" placeholder="请选择" clearable class="ele-fluid">
								<el-option label="执行成功" value="0" />
								<el-option label="执行失败" value="1" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="6" :sm="12">
						<div class="ele-form-actions">
							<el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon">查询</el-button>
							<!-- <el-button @click="(table.where = {}) && $refs.table.reload()">重置</el-button> -->
						</div>
					</el-col>
				</el-row>
			</el-form>
			<!-- 数据表格 -->
			<ele-data-table ref="table" :config="table" :choose.sync="choose" highlight-current-row>
				<template slot-scope="{ index }">
					<el-table-column type="index" :index="index" width="45" align="center" fixed="left" show-overflow-tooltip />
					<el-table-column prop="jobname" label="任务名称" sortable="custom" show-overflow-tooltip min-width="150" />
					<el-table-column prop="createtime" label="执行时间" sortable="custom" show-overflow-tooltip min-width="150">
						<template slot-scope="{ row }">
							{{ row.createtime | toDateString }}
						</template>
					</el-table-column>
					<el-table-column prop="state" label="执行状态" sortable="custom" min-width="110" show-overflow-tooltip>
						<template slot-scope="{ row }">
							<el-tag :type="['success', 'danger'][row.state]" size="mini">{{ ['执行成功', '执行失败'][row.state] }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="jobmessage" label="日志信息" sortable="custom" show-overflow-tooltip min-width="150" />
					<el-table-column prop="jobexception" label="异常信息" sortable="custom" show-overflow-tooltip min-width="150" />
					<el-table-column prop="jobcorn" label="执行表达式" sortable="custom" show-overflow-tooltip min-width="150" />
					<el-table-column prop="jobmethod" label="任务标识" sortable="custom" show-overflow-tooltip min-width="150" />
					<el-table-column prop="jobparm" label="任务参数" sortable="custom" show-overflow-tooltip min-width="150" />
				</template>
			</ele-data-table>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'ScmJobLog',
	data() {
		return {
			table: { url: '/scm/joblog/getJobLog', where: {} }, // 表格配置
			choose: [], // 表格选中数据
			showEdit: false, // 是否显示表单弹窗
			editForm: {}, // 表单数据
			editRules: {
				// 表单验证规则
				jobname: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
				jobmethod: [{ required: true, message: '请输入任务标识', trigger: 'blur' }],
				jobcorn: [{ required: true, message: '请输入任务表达式', trigger: 'blur' }]
			},
			daterange: '', // 筛选日期范围
		};
	},
	computed: {},
	methods: {
		/* 日期选择改变回调 */
		onDateRangeChoose() {
			if (this.daterange) {
				this.table.where.createTimeStart = this.daterange[0];
				this.table.where.createTimeEnd = this.daterange[1];
			} else {
				this.table.where.createTimeStart = null;
				this.table.where.createTimeEnd = null;
			}
		}
	}
};
</script>

<style scoped></style>
